<template>
  <Dialog :title="'查看详情'" v-model="dialogVisible" width="800px">
    <el-descriptions :column="2" border v-loading="detailLoading">
      <el-descriptions-item label="门店ID">
        {{ detailData.id }}
      </el-descriptions-item>
      <el-descriptions-item label="店铺编号">
        {{ detailData.storeNo }}
      </el-descriptions-item>
      <el-descriptions-item label="关联用户">
        {{ detailData.userName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="店铺名称">
        {{ detailData.storeName }}
      </el-descriptions-item>
      <el-descriptions-item label="店铺LOGO" :span="2">
        <el-image
          v-if="detailData.storeLogo"
          :src="detailData.storeLogo"
          :preview-src-list="[detailData.storeLogo]"
          preview-teleported
          class="w-100px h-100px"
          fit="cover"
        />
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        {{ detailData.contactPhone || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="粉丝数量">
        {{ detailData.followerCount || 0 }}
      </el-descriptions-item>
      <el-descriptions-item label="门店地址" :span="2">
        {{ detailData.address || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="经度">
        {{ detailData.longitude || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="纬度">
        {{ detailData.latitude || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="开店时间">
        {{ detailData.openDate ? formatDate(detailData.openDate) : '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="营业时间">
        {{ detailData.businessHours || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="休息日">
        {{ detailData.restDay || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="是否营业中">
        <dict-tag :type="DICT_TYPE.IS_BUSINESS" :value="detailData.isOpen" />
      </el-descriptions-item>
      <el-descriptions-item label="所属菜场名称">
        {{ detailData.marketName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="社区菜场名称">
        {{ detailData.communityMarketName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="收银机编号">
        {{ detailData.cashRegisterNo || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <dict-tag :type="DICT_TYPE.FARM_STATUS" :value="detailData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="关于我们" :span="2">
        {{ detailData.aboutUs || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">
        {{ detailData.createTime ? formatDate(detailData.createTime) : '-' }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { StoreInfoApi, StoreInfoVO } from '@/api/direct/storeinfo'
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/system/user'

/** 自营门店信息 详情 */
defineOptions({ name: 'DirectStoreInfoDetail' })

const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 详情的加载中
const detailData = ref<StoreInfoVO & { userName?: string }>(
  {} as StoreInfoVO & { userName?: string }
)

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  detailLoading.value = true
  try {
    // 获取门店详情
    detailData.value = await StoreInfoApi.getStoreInfo(id)

    // 加载用户信息显示用户昵称
    if (detailData.value.userId) {
      await loadUserInfo(detailData.value.userId)
    }
  } finally {
    detailLoading.value = false
  }
}

/** 加载用户信息 */
const loadUserInfo = async (userId: number) => {
  try {
    const userList = await UserApi.getSimpleUserList()
    const user = userList.find((u: UserApi.UserVO) => u.id === userId)
    if (user) {
      detailData.value.userName = user.nickname
    }
  } catch (error) {
    console.error('加载用户信息失败', error)
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
